<template>
  <div class="top_1">
    <div class="top">
      <div class="top_2" :class="{ shrink: isSticky }">
        <!-- 左侧：Logo -->
        <div class="left-part">
          <h1 class="topLogs">
            <a href="/shop"> 我的商城 </a>
          </h1>
        </div>
        <!-- 中间：搜索 -->
        <div class="center-part">
          <el-input
            @keydown.enter.native="handleSearch"
            size="big"
            v-model="search"
            :placeholder="currentPlaceholder"
            clearable
            style="width: 100%; max-width: 500px"
          ></el-input>
          <el-button
            type="danger"
            icon="el-icon-search"
            size="big"
            @click="handleSearch"
            style="margin-left: 10px"
          >
            搜索
          </el-button>
        </div>

        <!-- 右侧：购物车 -->
        <div class="right-part">
          <el-button
            type="primary"
            icon="el-icon-shopping-cart-full"
            size="big"
            @click="goToCart"
          >
            购物车
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchBar",
  data() {
    return {
      search: "",
      isSticky: false, // 控制是否收缩
      placeholderKeywords: [
        "牛仔裤",
        "电饭煲",
        "洗面奶",
        "手机",
        "运动鞋",
        "笔记本电脑",
      ],
      currentPlaceholder: "", // 当前显示的随机提示词
      currentRandomKeyword: "", // 当前随机选中的关键词（用于直接搜索）
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.setRandomPlaceholder();
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    setRandomPlaceholder() {
      const randomIndex = Math.floor(
        Math.random() * this.placeholderKeywords.length
      );
      this.currentRandomKeyword = this.placeholderKeywords[randomIndex]; // 存储当前关键词
      this.currentPlaceholder = `${this.currentRandomKeyword}`;
    },
    handleSearch() {
      if (!this.search || this.search.trim() === "") {
        this.search = this.currentRandomKeyword;
        this.$message.success(`正在搜索：${this.currentRandomKeyword}`);
      }
      this.$emit("search", this.search);
    },
    goToCart() {
      this.$router.push("/cart");
    },
    handleScroll() {
      this.isSticky = window.scrollY > 50;
    },
  },
};
</script>

<style scoped>
.top_1 {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid #d85f26;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.top {
  display: flex;
  align-items: center;
}

.top_2 {
  display: flex;
  align-items: center;
  height: 200px;
  margin: 0 auto;
  padding: 30px 20px;
  gap: 20px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.top_2.shrink {
  height: 100px;
  padding: 10px 20px;
}

.left-part {
  width: 250px;
}

.center-part {
  flex: 1;
  width: 600px;
  display: flex;
  align-items: center;
}

.right-part {
  width: 200px;
}

.topLogs {
  width: 190px;
  height: 80px;
}

.top_2.shrink .topLogs img {
  height: 50px;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
</style>
